<!--评审标准管理-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-button color-yellow width170" @click="addPS()">
        <img src="../../../../assets/assessment/icon-addRed.png" alt="" />
        <span>新建评审指标体系</span>
      </div>
    </div>
    <div class="table-container table-css">
        <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}"  @selection-change="handleSelectionChange" :cell-class-name="cellClsNm">
            <el-table-column type="selection"  width="55" align="center"></el-table-column>
            <el-table-column prop="zbtxName" label="评审指标体系" align="center" min-width="300">
              <div slot-scope="scope" class="table-edit">
                <span>{{scope.row.zbtxName}}</span>
                <span class="small-btn color-green" @click="addPS(scope.row)">
                    <img src="../../../../assets/assessment/icon-plan-record-detail.png"> 重命名
                </span>
                <span class="small-btn color-yellow" @click="addZB(scope.row)">
                    <img src="../../../../assets/assessment/icon-addRed.png"> 新增指标项
                </span>
              </div>
            </el-table-column>
            <el-table-column prop="info" label="评审指标项名称" align="center" min-width="350"> 
              <div slot-scope="scope">
                <div class="border-bottom lineHeight" v-for="i in scope.row.itemList" :key="i.itemId">{{i.itemName}}</div>
              </div>
            </el-table-column>
            <el-table-column label="操作" align="center" min-width="300">
              <div slot-scope="scope">
                <div class="btn-css border-bottom" v-for="i in scope.row.itemList" :key="i.itemId">
                    <span class="small-btn color-green" @click="addZB(scope.row,i)">
                        <img src="../../../../assets/assessment/icon-plan-record-detail.png"> 编辑
                    </span>
                    <span class="small-btn btn2" @click="gradePS(i.itemId,i.itemName)">
                        <img src="../../../../assets/assessment/icon-set-yellow.png"> 评审等级权重管理
                    </span>
                    <span class="small-btn delete-red" @click="deleteInfo(i.itemId)">
                        <img src="../../../../assets/assessment/icon-ydh.png"> 删除
                    </span>
                </div>
              </div>
            </el-table-column>
        </el-table>
        <h1 class="total-notice">当前共找到{{total}}条记录，当前显示{{(pageNo-1)*50 == 0?1:(pageNo-1)*50}}-{{total>50?pageNo*50:total}}条</h1>
        <div class="search-button color-primary width130" @click="seePS()">
            <img src="../../../../assets/assessment/icon-look.png" alt="" />
            <span>查看评审标准</span>
        </div>
        <div class="pagination-block">
            <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
            :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
    </div>
    <!-- 评审指标体系 -->
    <el-dialog title="评审指标体系" :visible.sync="dialogPS" :close-on-click-modal="false" width="50%">
      <div class="my-form-container" style="height:62px;width:80%">
        <el-form ref="addForm" :model="addForm" class="demo-ruleForm" :rules="rules">
          <el-row class="my-form-item" style="border:none">
            <el-col :span="24">
              <div class="my-form-item-label" >评审指标体系</div>
              <el-form-item  prop="zbtxName">
                <div class="my-form-item-value" >
                  <el-input v-model="addForm.zbtxName" class="width326"></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="button-group" slot="footer" style="margin-top:0">
          <div class="" @click="savePS">保存</div>
          <div class="" @click="dialogPS=false">取消</div>
        </div>
    </el-dialog>
    <!-- 新建评审指标项名称 -->
    <el-dialog title="新建评审指标项名称" :visible.sync="dialogAdd" :close-on-click-modal="false" width="50%">
      <div class="my-form-container" style="height:222px;width:80%">
        <el-form ref="v" :model="zbForm" class="demo-ruleForm">
          <el-row class="my-form-item">
            <el-col :span="24">
              <div class="my-form-item-label" >新建评审指标项名称</div>
              <el-form-item  prop="itemName">
                <div class="my-form-item-value">
                  <el-input v-model="zbForm.itemName" class="width326" placeholder="选题意义"></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="my-form-item">
            <el-col :span="24">
              <div class="my-form-item-label" >评审权重</div>
              <el-form-item  prop="itemRatio">
                <div class="my-form-item-value">
                  <el-input v-model="zbForm.itemRatio" class="width326"></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="my-form-item lastOne">
            <el-col :span="24">
              <div class="my-form-item-label">评审指标项名称简介</div>
              <el-form-item  prop="itemRemarks">
                <div class="my-form-item-value">
                  <el-input class="width326 top10" type="textarea" v-model="zbForm.itemRemarks" :rows="3"></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="button-group" slot="footer" style="margin-top:0">
          <div class="" @click="saveAdd">保存</div>
          <div class="" @click="dialogAdd=false">取消</div>
        </div>
    </el-dialog>
    <!-- 评审等级权重管理 -->
    <grade ref="grade" :ruleProps="paramsO"></grade>
  </div>
</template>

<script>
import {pstxList,pszbtxSave,resizeSave,zbxSave,updateZbSave,deleteZBX} from "@/api/teachingTopic";
import grade from './grade.vue'
export default {
  data() {
    return {
        dialogPS:false,
        dialogAdd:false,
        total:1,
        pageNo:1,
        pageSize:50,
        addForm:{
          zbtxName:'',
        },
        zbForm:{
          itemName:'',//指标项名称
          itemRemarks:'',//备注
          itemRatio	:'',
          zbtxId:'',
          itemId:'',
        },
        tableData: [],
        rules: {
          zbtxName: [
            { required: true, message: '评审指标体系不能为空', trigger: 'blur' }
          ]
        },
        itemID:'',
        paramsO:{
          itemID:'',
          itemName:''
        },
    };
  },
  components:{grade},
  mounted(){
    this.initList();
  },
  methods: {
    handleSelectionChange(){

    },
    cellClsNm({column}){
      if(column.label == '评审指标项名称' || column.label=='操作'){
        return 'miss-padding'
      }
    },
    //初始化表格
    async initList(){
      let res = await pstxList({current:this.pageNo,size:this.pageSize}) ;
      if(res.code == 200){
        this.tableData = res.data.records;
        this.total = res.data.total
      }
    },
    addPS(row){
        this.dialogPS = true;
        if(!row){
            Object.assign(this.addForm,this.$options.data().addForm)
        }else{
         this.addForm.zbtxId = row.zbtxId;
         this.addForm.zbtxName = row.zbtxName
        }
    },
    savePS(){
      this.$refs['addForm'].validate(async(valid) => {
        if (valid) {
            let res;
            if(this.addForm.zbtxId){
              res =  await resizeSave(this.addForm);
            }else{
              res =  await pszbtxSave(this.addForm);
            }
            if(res.code == 200){
              this.dialogPS = false;
              this.initList()
            }
        } 
        });        
    },
    addZB(row,i){
      this.dialogAdd = true;
      if(i){
        this.zbForm.zbtxId = row.zbtxId
        this.zbForm.itemRatio = i.itemRatio
        this.zbForm.itemName = i.itemName;
        this.zbForm.itemRemarks = i.itemRemarks
        this.zbForm.itemId = i.itemId
      }else{
        this.zbForm.zbtxId = row.zbtxId
        this.zbForm.itemRatio = row.itemRatio
        this.zbForm.itemName = '';
        this.zbForm.itemRemarks = ''
      }
    },
    seePS(){
      this.$router.push({
          path:'/teachingTopics/review/standard/seeStandard'
      })
    },
    async deleteInfo(id){
      let res = await deleteZBX({itemId:id})
      if(res.code == 200){
        this.$message.success('删除成功！');
        this.initList()
      }
    },
    gradePS(id,name){
      this.$refs.grade.gradeDialog = true;
      this.paramsO = {
        itemID : id,
        itemName: name
      }
      // this.itemID = id;
      // this.itemName = name;
      // this.$refs.grade.initList()
    },
    //保存指标项
    async saveAdd(){
      let res;
      if(this.zbForm.itemId){
       res = await updateZbSave(this.zbForm);
      }else{
        res = await zbxSave(this.zbForm);
      }
      if(res.code == 200){
        this.dialogAdd = false;
        this.initList()
      }
    },
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
 /deep/ .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
 /deep/ .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table thead.is-group th.el-table__cell{
    border-color: #c7d7eb;
  }
 /deep/ .el-table--border th, .el-table__fixed-right-patch{
    border-color: #c7d7eb;
  }
}
</style>
<style lang="less" scoped>
@import "../../../../styles/commonCss.less";
.search-container {
  justify-content: space-between !important;
}
.width170{width: 170px;}
/deep/.miss-padding{padding: 0!important;}
/deep/.miss-padding .cell{
    padding-left: 0!important;
    padding-right: 0!important;
}
.btn2{
    background: #fff6ef;
    border: 1px solid #f3b815;
    border-radius: 6px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    color: #f3b815;
}
/deep/.my-form-container .my-form-item > div .my-form-item-label{padding-left: 0!important;justify-content: center;}
.top10{margin-top: 13px;}
.total-notice{margin-bottom: 10px;}
.delete-red{
  color: #FA5339;
  background: #FFEFEF;
  border: 1px solid #FA5339;
}
.lastOne{
    border:none;height:100px;
    /deep/.el-form-item__error {
        top:96%;
    }
}
.width130{width: 130px;}
.color-green{
  background: #F1FFF8;
  border: 1px solid #02C86C;
  color: #02C86C;
  >img{width: 17px!important;height:17px!important}
}
.color-yellow{
    background: #FEF1E8;
    border: 1px solid #F86900;
    color: #F86900;
}
.table-edit{
  span:nth-child(1){
    display: block;
    margin-bottom: 10px;
  }
  span:nth-child(2){
    display: inline-flex;
    width: 100px;
    margin-right: 20px;
  }
  span:nth-child(3){
    display: inline-flex;
    width: 140px;
  }
}
/deep/.my-form-item-label{width: 200px!important;}
.btn-css{
  display: flex;
  span:nth-child(2){width: 184px;}
}
.width326{width: 250px;}
 /deep/.button-group{
    padding-bottom: 20px;
    margin-top: 0px;
  }
  /deep/.el-dialog__body{
    padding: 30px 20px 0;
  }
  .border-bottom{
    border-bottom: 1px solid #c7d7eb;
    padding: 20px;
    &:last-child{border-bottom: none;}
  }
  .lineHeight{
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
